<template>
  <div class="message-input">
    <!-- <el-input
      v-model="inputText"
      :placeholder="placeholder"
      :disabled="disabled"
      clearable
      type="textarea"
      resize="none"
      :rows="1"
      autosize
      @keydown.enter.prevent="handleEnter"
      ref="inputRef"
      class="custom-input"
    >
      <template #append>
        <el-button
          type="primary"
          :loading="disabled"
          :disabled="!inputText.trim()"
          @click="handleSend"
          class="send-button"
        >
          <el-icon><Position /></el-icon>
          <span>发送</span>
        </el-button>
      </template>
    </el-input> -->
    <div class="message-input-icontop">
      <el-icon class="message-input-icontop-item"><FolderOpened /></el-icon>
      <el-icon class="message-input-icontop-item"><Picture /></el-icon>
    </div>
    <div class="sendmsg">
        <el-mention
          v-model="inputText"
          :options="options"
          style="width: 400px"
          placeholder="输入'@'快速调用指令"
        />
        <el-button
          type="primary"
          :loading="disabled"
          :disabled="!inputText.trim()"
          @click="handleSend"
          class="send-button"
        >
          <el-icon><Position /></el-icon>
          <span>发送</span>
        </el-button>
    </div>
    
    <!-- <div class="input-hint">
      按回车键发送，按Shift+回车键换行
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { ElInput, ElButton, ElIcon } from 'element-plus';
import { Position, FolderOpened, Picture } from '@element-plus/icons-vue';
import { useChatStore } from '@/stores/chat.ts';

const initOptions = [
  {
    label: '小李识才，在专家选聘中，提名制是怎么规定的？',
    value: '小李识才，在专家选聘中，提名制是怎么规定的？',
  },
  {
    label: '小李识才，专家退出机制有哪些要求？',
    value: '小李识才，专家退出机制有哪些要求？',
  },
  {
    label: '小李识才，公司对专家年度考核的主要指标是什么？',
    value: '小李识才，公司对专家年度考核的主要指标是什么？',
  },
  {
    label: '小李识才，目前专家队伍的年龄结构情况如何？',
    value: '小李识才，目前专家队伍的年龄结构情况如何？',
  },
  {
    label: '小李识才，我们在配网专业和安监专业的专家数量对比如何？',
    value: '小李识才，我们在配网专业和安监专业的专家数量对比如何？',
  },
  {
    label: '小李识才，专家在各区域的分布情况能否做个分析？',
    value: '小李识才，专家在各区域的分布情况能否做个分析？',
  },
  {
    label: '小李识才，如果我们要开展一个配电线路数字化改造项目，应该邀请哪些类型的专家参与？',
    value: '小李识才，如果我们要开展一个配电线路数字化改造项目，应该邀请哪些类型的专家参与？',
  },
  {
    label: '小李识才，在新能源并网项目中，哪些专家最合适参与？',
    value: '小李识才，在新能源并网项目中，哪些专家最合适参与？',
  },
  {
    label: '小李识才，针对客户服务数字化转型，推荐哪些方向的专家团队？',
    value: '小李识才，针对客户服务数字化转型，推荐哪些方向的专家团队？',
  },
  {
    label: '小李识才，我们在未来两年的人才储备上应重点关注哪些方向？',
    value: '小李识才，我们在未来两年的人才储备上应重点关注哪些方向？',
  },
  {
    label: '小李识才，针对专家队伍的年龄结构，如何避免经验断层？',
    value: '小李识才，针对专家队伍的年龄结构，如何避免经验断层？',
  },
  {
    label: '小李识才，公司在专家培养方面，下一步应该重点做什么？',
    value: '小李识才，公司在专家培养方面，下一步应该重点做什么？',
  },
]

const chatStore = useChatStore();
const chatMessages = computed(() => chatStore.messages);

const props = defineProps<{
  disabled: boolean;
}>();

const emit = defineEmits<{
  (e: 'send', value: string): void;
}>();

const options = ref(initOptions)

// 监听消息列表变化，自动滚动到底部
// watch(
//   chatMessages,
//   () => {
//     if (chatMessages.value.length > 2) {
//       const ll = [...chatMessages.value].reverse()
//       const type = ll[1].content || '';
//       if (['小李识才，在专家选聘中，提名制是怎么规定的？', '小李识才，如果我们要开展一个配电线路数字化改造项目，应该邀请哪些类型的专家参与？', '小李识才，我们在未来两年的人才储备上应重点关注哪些方向？', '作业防措建议'].includes(type)) {
//         options.value = [
//           {
//             label: '工作票号',
//             value: '工作票号',
//           },
//         ]
//       }else if (['作业人员过去一年违章记录', '小李识才，我们在配网专业和安监专业的专家数量对比如何？', '小李识才，专家退出机制有哪些要求？'].includes(type)) {
//         options.value = [
//           {
//             label: '人员名称',
//             value: '人员名称',
//           },
//         ]
//       }else if (['小李识才，目前专家队伍的年龄结构情况如何？'].includes(type)) {
//         options.value = [
//           {
//             label: '作业单位名称',
//             value: '作业单位名称',
//           },
//         ]
//       }else{
//         options.value = initOptions
//       }
//     }
//   },
//   { deep: true }
// );

const inputText = ref('');
const inputRef = ref<InstanceType<typeof ElInput> | null>(null);

const placeholder = computed(() => {
  return props.disabled ? '等待响应中...' : '输入您的问题...';
});

const handleEnter = (e: Event | KeyboardEvent) => {
  // Only send on Enter without shift key
  if (!(e instanceof KeyboardEvent) || !e.shiftKey && inputText.value.trim()) {
    handleSend();
  }
};

const handleSend = () => {
  if (inputText.value.trim() && !props.disabled) {
    emit('send', inputText.value);
    inputText.value = '';
    
    // Focus the input after sending
    setTimeout(() => {
      if (inputRef.value && inputRef.value.$el) {
        const textarea = inputRef.value.$el.querySelector('textarea');
        if (textarea) textarea.focus();
      }
    }, 10);
  }
};

onMounted(() => {
  if (inputRef.value && inputRef.value.$el) {
    const textarea = inputRef.value.$el.querySelector('textarea');
    if (textarea) textarea.focus();
  }
});
</script>

<style scoped lang="scss">
.message-input {
  width: 100%;
  position: relative;

  .message-input-icontop{
    .message-input-icontop-item{
      // width: 26px;
      // height: 26px;
      font-size: 26px;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .sendmsg{
    display: flex;
    align-items: center;
    justify-content: space-between;
    ::v-deep{
      .el-input__wrapper{
        border-radius: 4px;
      }
    }
  }
}

.custom-input {
  /* border-radius: var(--radius-lg); */
  overflow: hidden;
}
::v-deep(){
  .el-textarea{
    background: #0e3d5d;
  }
    .el-textarea > .el-textarea__inner{
      background: #0e3d5d;
      border: none;
      color: #aaaaaa;
    }
  }

:deep(.el-input__wrapper) {
  border-radius: var(--radius-lg);
  padding-right: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--neutral-200);
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: white;
}

:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper:focus-within) {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--primary-color);
}

:deep(.el-textarea__inner) {
  resize: none;
  padding: 12px 16px;
  min-height: 24px !important;
  max-height: 150px !important;
  line-height: 1.5;
  font-size: 1rem;
  color: var(--neutral-800);
}

:deep(.el-input-group__append) {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 0;
  background-color: var(--primary-color);
  border: none;
}

.input-hint {
  color: var(--neutral-500);
  font-size: 0.7rem;
  margin-top: 6px;
  text-align: right;
  padding-right: 8px;
}

.send-button {
  border: none;
  background-color: transparent;
  color: white;
  height: 100%;
  padding: 0 16px;
  font-size: 0.9rem;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.send-button:hover {
  background-color: var(--primary-dark);
}

.send-button:disabled {
  background-color: var(--primary-light);
  color: white;
}

.send-button .el-icon {
  font-size: 1rem;
}
</style> 